<script setup>
import { useCountStore } from "./stores/count";
import Test1 from "./components/test1.vue";
// import Test2 from "./components/test2.vue";
// import Test3 from "./components/test3.vue";
// import Test4 from "./components/test4.vue";
// import Test5 from "./components/test5.vue";
// const store = reative({})
// setTimeout(() => {
//   countStore.$dispose();
// }, 3000);
const countStore = useCountStore(); //状态放入了countStore
const handleClick = () => {
  // 完全替换状态
  countStore.$state = {
    count: 100,
    arr: [8, 9, 10],
  };
  // countStore.count++;
  // countStore.increment();
  // countStore.arr.push(4);
  // countStore.$patch({
  //   count: countStore.count + 1,
  //   arr: [...countStore.arr, 4],
  // });
  // countStore.$patch((state) => {
  //   state.count++;
  //   state.arr.push(4);
  // });
};
// countStore.$subscribe((mutation, state) => {
//   console.log(mutation, state);
// });
countStore.$onAction(({ after, onError, name, store, args }) => {
  after((result) => {
    console.log(result);
  });
  onError((error) => {
    console.log(error);
  });
});
</script>

<template>
  <!-- <Test1 /> -->
  <!-- <Test2 /> -->
  <!-- <Test3 /> -->
  <!-- <Test4 /> -->
  <!-- <Test5 /> -->
  『{{ countStore.count }}』 『{{ countStore.doubleCount }}』
  <button @click="handleClick">修改</button>
  <button @click="countStore.$reset">重置</button>
  <div v-for="item in countStore.arr" :key="item">
    {{ item }}
  </div>
</template>

<style scoped></style>
